<div ng-controller="RolesController" class="role-ui">
  <div class="container-fluid">
    <div class="row">

    </div>
    <div class="row vertical-align">
      <div class="col-md-4 col-xs-6">
        <form class="form-search">
          <div class="input-group">
            <input type="text" class="input-xxlarge form-control search-query" ng-model="queryy"
                   placeholder="Search role" focus="true"/>
            <span class="input-group-btn">
                        <button type="submit" class="btn btn-default" ng-click="">
                          <i class="fa fa-search"></i>
                        </button>
                            <button type="submit" ng-click="addRole()"
                                    class="btn btn-success" ng-click="">
                              <i class="fa fa-plus-circle"> </i>
                              Add Role
                            </button>
                            </span>
          </div>

        </form>

      </div>
      <div class="col-md-2 col-xs-2">
        <h3>Permissions
          <a href="javascript:void(0)" tabindex="1"
             data-trigger="focus" data-placement="right"
             data-container="body"
             data-content="{{ 'security.permissions' | translate:links }}" bs-popover>
            <i class="fa fa-question-circle"></i>
          </a>
        </h3>
      </div>
      <div class="col-md-6 col-xs-4">
        <div class="btn-group pull-right">
          <button class="btn btn-sm btn-success" ng-click="addRule()"><i
            class="fa fa-plus-circle"> </i>Add Rule
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-xs-6">
        <table class="table table-striped table-bordered table-hover table-condensed pointer">
          <thead>
          <tr>
            <th>Name
              <a href="javascript:void(0)" tabindex="1"
                 data-trigger="focus" data-placement="right"
                 data-container="body"
                 data-content="{{ 'security.roles' | translate:links }}" bs-popover>
                <i class="fa fa-question-circle"></i>
              </a>
            </th>
            <th>Inherited Role</th>
            <th>Mode</th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="result in usersResult | filter:queryy |orderBy:predicate:reverse"
              ng-class="{ info : selectedRole == result}">
            <td ng-click="selectRole(result)">{{result['name']}}</td>
            <td ng-click="selectRole(result)">{{result['inheritedRole'].name}}</td>
            <td ng-click="selectRole(result)">
              <select ng-change="changeMode(result)" ng-model="result['mode']">
                <option value="1" ng-selected="result['mode'] == 1">Allow all but</option>
                <option value="0" ng-selected="result['mode'] == 0">Deny all but</option>
              </select>
            </td>
            <td>
              <div class="btn-group">
                <button class="btn btn-danger btn-xs" ng-click="deleteRole(result)">
                  Delete
                </button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-8 col-xs-6">

        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover table-condensed pointer">
            <thead>
            <tr>
              <th>Name</th>
              <th>Execute</th>
              <th>Delete</th>
              <th>Update</th>
              <th>Read</th>
              <th>Create</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="i in rules track by $index">
              <td ng-click="mostra(selectedRole[i])">{{ i }}</td>
              <td ng-repeat="m in calcolaBitmask(selectedRole['rules'][i]) track by $index">
                <input type="checkbox"
                       ng-change="changeRules(i,selectedRole.name,$index,selectedRole['rules'][i],calcolaBitmask(selectedRole['rules'][i]))"
                       ng-model="calcolaBitmask(selectedRole['rules'][i])[$index]">
              </td>
              <td>
                <button class="btn btn-danger btn-xs" ng-click="removeRule(i)">
                  <i class="fa fa-remove"></i>
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
